<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>bmap</title>
    <style>
      body,
      html,
      #allmap {
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0;
        font-family: "微软雅黑";
      }
    </style>
  </head>
  <body>
    <div id="allmap"></div>
  </body>
</html>
<script
  type="text/javascript"
  src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=CPxHyHH5XD8mUnmRPbv9BehycOEklp34"
></script>
<script>
  // https://lbsyun.baidu.com/apiconsole/custommap 特色服务平台-个性化地图-我的地图-新建（添加主题-复制样式ID
  const styleId = "4342731d279ece1240cbc4848d7d492e";

  const bmap = new BMapGL.Map("allmap"); // 创建地图实例
  const point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
  bmap.centerAndZoom(point, 12); // 设置中心点坐标和地图级别
  bmap.enableScrollWheelZoom(); // 开启鼠标滚轮缩放

  // 设置自定义样式
  bmap.setMapStyleV2({
    styleId,
    // styleJson:[]  // 或json方式
  });

  // 自定义图标
  const url = "https://www.youbaobao.xyz/datav-res/datav/location.png";
  const myIcon = new BMapGL.Icon(
    url, // 图标链接
    new BMapGL.Size(30, 30), // 尺寸
    {
      anchor: new BMapGL.Size(0, 0), // 锚点 类似 transform
      imageOffset: new BMapGL.Size(0, 0), // 图标偏移量 类似 bg-position
    }
  );

  // 创建标注对象
  const marker = new BMapGL.Marker(point, {
    icon: myIcon, // 自定义图标
  });
  bmap.addOverlay(marker); // 添加标注

  // 创建弹窗 参数可以是标签 如<div ...></div> 字符串类型
  const infoWindow = new BMapGL.InfoWindow("标题", {
    width: 200,
    height: 100,
    title: "说明",
  });
  // 点击图标弹窗
  marker.addEventListener("click", function () {
    bmap.openInfoWindow(infoWindow, point); // 打开弹窗
  });
</script>
